<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>
			<view 
			 @click="leftHandleClick(i)"
			 :class="active===i?'active':''"
			 v-for="(item,i) in this.projectData.data"
			 :key="i">{{item.name}}
		    </view>
			
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view>
				<view class="item" v-for="(item,i) in sec_projectData.list" :key="i">
					<view class="item-text">{{item.sec_name}}
						<uni-icons type="arrowright" size="14"></uni-icons>
						<!-- arrowright -->
					</view>
					<view class="sec_item_box" >
						<text class="sec_item" v-for="(item2,k) in item.sec_list" :key="k">{{item2}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				sec_projectData:'',
				projectData:{
					"data":[{
						id:1,
						name:'手术美容',
						list:[
							{
								sec_name:"眼部",
								sec_list:["重睑术","上睑下垂矫正术","外眦成形术"],
							},
							{
								sec_name:"鼻部",
								sec_list:["隆鼻术","隆鼻术后材料取出"]
							}
						]
					},
					{
						id:2,
						name:'注射美容',
						list:[
							{
								sec_name:"脸部注射",
								sec_list:["重睑术","上睑下垂矫正术","外眦成形术"],
							},
							{
								sec_name:"胸部注射",
								sec_list:["脂肪隆胸","假体隆胸"]
							}
						]
						
					}]
				}
			}
		},
		methods: {
			leftHandleClick(index){
				this.active=index
				this.sec_projectData=this.projectData.data[index]
				console.log(this.sec_projectData)
			}
		}
	}
</script>

<style lang="scss">
page{
		height: 100%;
	}
.pics{
	display: flex;
	height:100%;
	.left{
		width: 200rpx;
		height: 100%;
		// border-right: 1px solid #eee;
		background-color: #F0F0F0;
		view{
			height: 60;
			line-height: 60px;
			border-top: 1px solid #eee;
			text-align: center;
			font-size: 15px;
		}
		.active{
			background: #fafafa;
			color: #333;
			font-size: 15px;
			font-weight: 600;
		}
	}
	
	.right{
		height: 100%;
		background-color: #fafafa;
		// border: 1px solid;
		.item{
			margin-top: 20px;
			margin-left: 10px;
			padding: 5px;
			color: #333;
			.item-text{
				font-size: 13px;
				font-weight: 600;
			}
			.sec_item_box{
				display: flex;
				flex-wrap: wrap;
				margin-top: 10px;
				.sec_item{
					text-align: center;
					font-size: 10px;
					padding: 8rpx 16rpx;
					// border: 1px solid #333;
					border-radius: 15px;
					margin-left: 10px;
					margin-top: 10px;
					background-color: #F0F0F0;
				}
			}
		}
	}
	
}
</style>
